<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  
</body>
<script>

  // function Teacher(msg){
  //   this.msg = msg;
  // }

  // function Stu(name, msg){
  //   this.name = name;
  //   if(msg === "放假"){
  //     console.log(this.name + "可以出去玩了")
  //   }else if(msg === "开学"){
  //     console.log(this.name + "作业还没写完")
  //   }
  // }

  // const t = new Teacher("开学");

  // new Stu( "张三", t.msg );
  // new Stu( "李四", t.msg );
  // new Stu( "王二", t.msg );
  // new Stu( "赵五", t.msg );



  // =================


  // 发布订阅者模式

  // 事件监听系统
  // 绑定：添加订阅者
  // 解绑：删除订阅者
  // 触发：发布状态

  // 建立发布者和订阅者的关系

  // 发布者：浏览器，用户，人
  // 订阅者：事件处理函数

  // 给btn绑定了点击事件处理函数f1
  // 给btn绑定了点击事件处理函数f2
  // 给btn绑定了点击事件处理函数f3
  
  // 给box绑定了双击事件处理函数f2
  // 给box绑定了双击事件处理函数f3

  // 发布：点击btn的信息
  // f1, f2, f3都执行

  // 发布：双击box的信息
  // f2, f3都执行

  // ============

  // 自定义事件系统

  const event = {
    // 用来记录所有的事件和相关的事件处理函数
    msg: {
      // abc: [f1, f2],
      // qwe: [f3]
    },
    // 绑定
    on:function(type, cb){
      if(this.msg[type]){
        this.msg[type].push( cb );
      }else{
        this.msg[type] = [cb];
      }
    },
    // 解绑
    off:function(type, cb){
      if( !this.msg[type] ) return;
      const index = this.msg[type].indexOf(cb)
      if(index != -1){
        this.msg[type].splice(index, 1);
      }
    },
    // 触发
    emit:function(type){
      if( !this.msg[type] ) return;
      this.msg[type].forEach(val=>{
        val();
      })
    }
  }

  event.on("abc", f1)
  event.on("abc", f2)
  event.on("abc", f3)

  event.on("qwe", f1)

  event.on("asd", f1)
  event.on("asd", f4)
  event.on("asd", f3)


  // event.off("abc", f2);
  // event.off("abc", f4);
  // event.off("zxc", f1);
  // event.off("abc", f1);

  // event.emit( "abc" );
  // event.emit( "qwe" );
  // event.emit( "asd" );
  event.emit( "zxc" );


  console.log(event.msg);



  function f1(){
    console.log(1)
  }
  function f2(){
    console.log(2)
  }
  function f3(){
    console.log(3)
  }
  function f4(){
    console.log(4)
  }
</script>
</html>